<template>
  <div class="graph-header">
    <div class="graph-header-Options">
      <div class="graph-header-Options-left">
        <div
          class="graph-header-Options-left-btn"
          @click="
            () => {
              router.push('myCloud');
            }
          "
        >
          <iconifyIconOnline icon="ri:arrow-left-line" class="text-[30px]" />
          <span>返回</span>
        </div>
        <div class="graph-header-Options-left-btn" @click="handleSave">
          <iconifyIconOnline icon="ri:save-3-line" class="text-[30px]" />
          <span>保存</span>
        </div>
        <div
          class="graph-header-Options-left-btn"
          @click="tagGraph.copySelected"
        >
          <iconifyIconOnline
            icon="ph:copy-light"
            class="cursor-pointer text-[30px]"
          />
          <span>复制</span>
        </div>
        <div
          class="graph-header-Options-left-btn"
          @click="tagGraph.deleteSelected"
        >
          <iconifyIconOnline
            icon="material-symbols:delete-forever-outline"
            class="text-[30px]"
          />
          <span>删除</span>
        </div>
        <el-divider direction="vertical" style="height: 60%" />
        <div class="graph-header-Options-left-btn" @click="tagGraph.undo">
          <iconifyIconOnline
            icon="ri:arrow-go-back-fill"
            class="cursor-pointer text-[30px]"
          />
          <span>撤销</span>
        </div>
        <div class="graph-header-Options-left-btn" @click="tagGraph.redo">
          <iconifyIconOnline
            icon="ri:arrow-go-forward-fill"
            class="cursor-pointer text-[30px]"
          />
          <span>恢复</span>
        </div>
        <div
          class="graph-header-Options-left-btn"
          @click="tagGraph.rotateSelected"
        >
          <iconifyIconOnline
            icon="carbon:rotate-clockwise"
            class="cursor-pointer text-[30px]"
          />
          <span>旋转</span>
        </div>
        <el-divider direction="vertical" style="height: 60%" />
        <div class="graph-header-Options-left-btn" @click="handleTagSettings">
          <iconifyIconOnline
            icon="hugeicons:list-setting"
            class="cursor-pointer text-[30px]"
          />
          <span>标签配置</span>
        </div>
        <div class="graph-header-Options-left-btn mr-1">
          <el-dropdown>
            <div>
              <iconifyIconOnline
                icon="material-symbols:layers-outline"
                style="
                  display: block;
                  margin-bottom: 4px;
                  color: #242424;
                  background-size: 100% 100%;
                "
                class="cursor-pointer text-[30px]"
              />

              <iconifyIconOnline
                icon="ep:caret-bottom"
                style="
                  position: absolute;
                  top: 11px;
                  right: -12px;
                  font-size: 15px;
                "
              />
              <span style="padding-left: 5px; font-size: 12px; color: #242424"
                >图层</span
              >
            </div>

            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="tagGraph.changeLayer('bringForward')">
                  <img
                    style="width: 24px; height: 24px; margin-right: 5px"
                    src=""
                  />
                  上移一层
                </el-dropdown-item>
                <el-dropdown-item @click="tagGraph.changeLayer('sendBackward')">
                  <img
                    style="width: 24px; height: 24px; margin-right: 5px"
                    src=""
                  />
                  下移一层
                </el-dropdown-item>
                <el-dropdown-item @click="tagGraph.changeLayer('bringToFront')">
                  <img
                    style="width: 24px; height: 24px; margin-right: 5px"
                    src=""
                  />
                  置于顶层
                </el-dropdown-item>
                <el-dropdown-item @click="tagGraph.changeLayer('sendToBack')">
                  <img
                    style="width: 24px; height: 24px; margin-right: 5px"
                    src=""
                  />
                  置于底层
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <div class="graph-header-Options-left-btn">
          <el-dropdown>
            <div>
              <span
                style="
                  display: block;
                  margin-bottom: 7px;
                  background-size: 100% 100%;
                  width: 25px;
                  height: 25px;
                  background-image: url(&quot;&quot;);
                "
              />
              <iconifyIconOnline
                icon="ep:caret-bottom"
                style="
                  position: absolute;
                  top: 11px;
                  right: -16px;
                  font-size: 15px;
                "
              />
              <span style="font-size: 12px; color: #242424">对齐</span>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="tagGraph.alignSelected('left')">
                  <img
                    style="width: 24px; height: 24px; margin-right: 5px"
                    src=""
                  />
                  左对齐
                </el-dropdown-item>
                <el-dropdown-item @click="tagGraph.alignSelected('right')">
                  <img
                    style="width: 24px; height: 24px; margin-right: 5px"
                    src=""
                  />
                  右对齐</el-dropdown-item
                >
                <el-dropdown-item @click="tagGraph.alignSelected('center')">
                  <img
                    style="width: 24px; height: 24px; margin-right: 5px"
                    src=""
                  />
                  水平剧中
                </el-dropdown-item>
                <el-dropdown-item
                  divided
                  @click="tagGraph.alignSelected('top')"
                >
                  <img
                    style="width: 24px; height: 24px; margin-right: 5px"
                    src=""
                  />
                  顶对齐
                </el-dropdown-item>
                <el-dropdown-item @click="tagGraph.alignSelected('bottom')">
                  <img
                    style="width: 24px; height: 24px; margin-right: 5px"
                    src=""
                  />
                  底对齐
                </el-dropdown-item>
                <el-dropdown-item @click="tagGraph.alignSelected('middle')">
                  <img
                    style="width: 24px; height: 24px; margin-right: 5px"
                    src=""
                  />
                  垂直居中
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
      <div class="graph-header-Options-right">
        <el-dropdown trigger="click">
          <span class="mr-3">
            另存为
            <iconifyIconOnline
              icon="ep:arrow-down"
              class="inline-block text-[12]"
          /></span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item
                @click="tagGraph.exportAsPDF(tagConfig.tagName)"
              >
                PDF文件(*.pdf)</el-dropdown-item
              >
              <el-dropdown-item
                @click="tagGraph.exportAsPNG(tagConfig.tagName)"
              >
                图片(*.png)
              </el-dropdown-item>
              <el-dropdown-item @click="tagGraph.exportAsJPG(tagConfig.tagName)"
                >图片(*.jpg)</el-dropdown-item
              >
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <el-button :icon="useRenderIcon(eye)" @click="handlepreview"
          >预览</el-button
        >
      </div>
    </div>
    <div class="graph-header-font">
      <div class="inpt">
        <span>字体:</span>
        <el-select
          v-model="fontFarimy"
          :disabled="isDate ? !isDate : readOnly"
          style="width: 100px"
          @change="handleFontFamily(fontFarimy)"
        >
          <el-option
            v-for="(item, index) in fontFarimyOptions"
            :key="index"
            :label="item.label"
            :value="item.value"
            :style="{ fontFamily: item.value }"
          />
        </el-select>
      </div>

      <div class="inpt">
        <span>字号:</span>
        <el-input-number
          v-model="fontSizeNum"
          style="width: 90px"
          :disabled="isDate ? !isDate : readOnly"
          controls-position="right"
          @change="onFontSizeChange"
        />
      </div>
      <div class="inpt">
        <span>字间距:</span>
        <el-input-number
          v-model="fontSpacingNum"
          style="width: 90px"
          :disabled="readOnly"
          controls-position="right"
          @change="tagGraph.setCharSpacing(fontSpacingNum)"
        />
      </div>
      <div class="inpt">
        <span>行间距:</span>
        <el-input-number
          v-model="lineHeight"
          style="width: 90px"
          :disabled="readOnly"
          controls-position="right"
          @change="tagGraph.setLineHeight(lineHeight)"
        />
      </div>
      <el-divider direction="vertical" style="height: 100%" />
      <el-tooltip content="加粗" raw-content>
        <span
          class="cursor-pointer textopt"
          style="
            width: 24px;
            height: 24px;
            margin: 0 1px;
            background: url(&quot;&quot;) -54px -10px
              no-repeat rgba(0, 0, 0, 0);
          "
          @click="tagGraph.setBold"
        />
      </el-tooltip>
      <el-tooltip content="倾斜" raw-content>
        <span
          class="cursor-pointer textopt"
          style="
            width: 24px;
            height: 24px;
            margin: 0 1px;
            background: url(&quot;&quot;) -54px -54px
              no-repeat rgba(0, 0, 0, 0);
          "
          @click="tagGraph.setItalic"
        />
      </el-tooltip>
      <el-tooltip content="删除线" raw-content>
        <span
          class="cursor-pointer textopt"
          style="
            width: 24px;
            height: 24px;
            margin: 0 1px;
            background: url(&quot;&quot;) -54px -98px
              no-repeat rgba(0, 0, 0, 0);
          "
          @click="tagGraph.setLinethrough"
        />
      </el-tooltip>
      <el-tooltip content="下划线" raw-content>
        <span
          class="cursor-pointer textopt"
          style="
            width: 24px;
            height: 24px;
            margin: 0 1px;
            background: url(&quot;&quot;) -98px -10px
              no-repeat rgba(0, 0, 0, 0);
          "
          @click="tagGraph.setUnderline"
        />
      </el-tooltip>

      <el-tooltip content="黑反" raw-content>
        <span
          class="cursor-pointer textopt"
          style="
            width: 17px;
            height: 17px;
            margin: 0 5px;
            background-image: url(&quot;&quot;);
            background-size: 100%;
            background-repeat: no-repeat;
          "
          @click="tagGraph.setTextColor"
        />
      </el-tooltip>
      <el-tooltip content="镜像" raw-content>
        <span
          class="cursor-pointer textopt"
          style="
            width: 18px;
            height: 18px;
            margin: 0 5px;
            background-image: url(&quot;&quot;);
            background-size: 100%;
            background-repeat: no-repeat;
          "
          @click="tagGraph.setFlip"
        />
      </el-tooltip>
      <el-tooltip content="居左" raw-content>
        <span
          class="cursor-pointer textopt"
          style="
            width: 24px;
            height: 24px;
            margin: 0 1px;
            background: url(&quot;&quot;) -98px -98px
              no-repeat rgba(0, 0, 0, 0);
          "
          @click="tagGraph.setTextAlign('left')"
        />
      </el-tooltip>
      <el-tooltip content="剧中" raw-content>
        <span
          class="cursor-pointer textopt"
          style="
            width: 24px;
            height: 24px;
            margin: 0 1px;
            background: url(&quot;&quot;) -10px -54px
              no-repeat rgba(0, 0, 0, 0);
          "
          @click="tagGraph.setTextAlign('center')"
        />
      </el-tooltip>
      <el-tooltip content="居右" raw-content>
        <span
          class="cursor-pointer textopt"
          style="
            width: 24px;
            height: 24px;
            margin: 0 1px;
            background: url(&quot;&quot;) -10px -98px
              no-repeat rgba(0, 0, 0, 0);
          "
          @click="tagGraph.setTextAlign('right')"
        />
      </el-tooltip>
      <el-tooltip content="拉伸" raw-content>
        <span
          class="cursor-pointer textopt"
          style="
            width: 24px;
            height: 24px;
            margin: 0 1px;
            background: url(&quot;&quot;) -142px -10px
              no-repeat rgba(0, 0, 0, 0);
          "
          @click="tagGraph.setTextAlign('stretch')"
        />
      </el-tooltip>
      <el-divider direction="vertical" style="height: 100%" />
      <div class="inpt">
        <span>X:</span>
        <el-input
          v-model="x"
          style="width: 50px"
          @input="tagGraph.setX(Number(x) * fabricLeftRatio)"
        />
      </div>
      <div class="inpt">
        <span>Y:</span>
        <el-input
          v-model="y"
          style="width: 50px"
          @input="tagGraph.setY(Number(y) * fabricLeftRatio)"
        />
      </div>
      <div class="inpt">
        <span>W:</span>
        <el-input
          v-model="width"
          style="width: 50px"
          @input="tagGraph.setWidth(Number(width) * fabricWidthRatio)"
        />
      </div>
      <div class="inpt">
        <span>H:</span>
        <el-input
          v-model="height"
          style="width: 50px"
          @input="tagGraph.setHeight(Number(height) * fabricHeightRatio)"
        />
      </div>
    </div>
  </div>
</template>
<script setup>
import tagDetaileForm from "../otherDialog/tagDetaileForm.vue";
import preview from "../otherDialog/preview.vue";
import fontlist from "../../public/iconFont/fontdata";
import eventBus from "@/utils/eventBus";
import { loadFont } from "@/utils/code/code";
import { saveDetail } from "@/api/tagGraph";
import { message } from "@/utils/message";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { addDialog } from "@/components/ReDialog";
import { initializeFonts } from "@/utils/fontUtils";
import { useRouter, onBeforeRouteLeave } from "vue-router";
import { ElLoading } from "element-plus";
import {
  ref,
  defineProps,
  defineEmits,
  onBeforeUnmount,
  watch,
  onMounted
} from "vue";

import iconifyIconOnline from "@/components/ReIcon/src/iconifyIconOnline";
import eye from "@iconify-icons/ri/eye-line";

const fontFarimyOptions = ref([]);
const props = defineProps([
  "tagGraph",
  "parentId",
  "documentId",
  "tagConfig",
  "zoomRate",
  "mmPxRatio",
  "canvasRatio",
  "bgImgFileName",
  "backgroundImageBase4",
  "bgImgPrint"
]);
const emit = defineEmits([
  "saveSetting",
  "update:documentId",
  "clearActiveRef"
]);
let fontFarimy = ref("NSimSun");
let fontSizeNum = ref("");
let fontSpacingNum = ref("");
let lineHeight = ref("");
let x = ref(null);
let y = ref(null);
let fabricWidthRatio = ref(1);
let fabricHeightRatio = ref(1);
let fabricLeftRatio = ref(1);
let width = ref(null);
let height = ref(null);
let readOnly = ref(true);

let isDate = ref();
const router = useRouter();

onMounted(() => {
  fontFarimyOptions.value = [];
  initializeFonts(fontlist).then(initializedFontList => {
    fontFarimyOptions.value = initializedFontList;
  });

  window.addEventListener("keydown", handleKeyDown);
  window.addEventListener("beforeunload", handleBeforeUnload);
});
onBeforeUnmount(() => {
  window.removeEventListener("beforeunload", handleBeforeUnload);
  window.removeEventListener("keydown", handleKeyDown);
});
const handleKeyDown = event => {
  if (event.key == "Delete") {
    event.preventDefault();
    props.tagGraph.deleteSelected();
    emit("clearActiveRef");
  }
  if (event.ctrlKey) {
    switch (event.key) {
      case "z":
        event.preventDefault();
        props.tagGraph.undo();
        break;
      case "c":
        event.preventDefault();
        props.tagGraph.copySelected();
        break;
      case "y":
        event.preventDefault();
        props.tagGraph.redo();
        break;
    }
  }
};

watch(
  () => props.tagGraph,
  val => {
    if (val) {
      let cancas = val.getCanvas();
      cancas.on("object:moving", () => {
        let activeObject = val.getActiveObject();
        if (activeObject) {
          x.value = parseFloat(
            activeObject.getBoundingRect().left /
              props.zoomRate /
              props.mmPxRatio /
              props.canvasRatio,
            10
          ).toFixed(1);
          y.value = parseFloat(
            activeObject.getBoundingRect().top /
              props.zoomRate /
              props.mmPxRatio /
              props.canvasRatio,
            10
          ).toFixed(1);
        }
      });

      cancas.on("mouse:down", e => {
        handleMouseDown(e);
      });
      cancas.on("object:added", e => {
        handleMouseDown(e);
      });
      cancas.on("selection:created", e => {
        handleCreateSelection(e);
      });

      cancas.on("object:modified", () => {
        let activeObject = val.getActiveObject();

        if (activeObject) {
          width.value = parseFloat(
            activeObject?.getBoundingRect().width /
              props.zoomRate /
              props.mmPxRatio /
              props.canvasRatio,
            10
          ).toFixed(1);
          height.value = parseFloat(
            activeObject?.getBoundingRect().height /
              props.zoomRate /
              props.mmPxRatio /
              props.canvasRatio,
            10
          ).toFixed(1);
        }

        // eventBus.emit("fontWidthAndHeightChange", {
        //   width: width.value,
        //   height: height.value
        // });

        val.saveState();
      });
    }
  }
);
const handleCreateSelection = e => {
  const group = e.selected;
  isDate.value = false;
  readOnly.value = false;
  //判断他们的type是否都为 textbox 或者 date
  const isConcordance = group.every(
    item => item.type === "textbox" || item.componentType === "date"
  );
  if (isConcordance) {
    let activeObject = group[0];
    fontFarimy.value = activeObject.fontFamily;
    fontSizeNum.value = parseInt(Math.round(activeObject.fontSize / 1.764));
    fontSpacingNum.value = activeObject.charSpacing;
    lineHeight.value = activeObject.lineHeight;
  } else {
    fontFarimy.value = "NSimSun";
    fontSizeNum.value = "";
    fontSpacingNum.value = "";
    lineHeight.value = "";
  }
};

const handleMouseDown = e => {
  let activeObject = e.target;
  if (activeObject?._objects) activeObject = activeObject._objects[0];
  if (activeObject) {
    x.value = parseFloat(
      activeObject.getBoundingRect().left /
        props.zoomRate /
        props.mmPxRatio /
        props.canvasRatio,
      10
    ).toFixed(1);
    y.value = parseFloat(
      activeObject.getBoundingRect().top /
        props.zoomRate /
        props.mmPxRatio /
        props.canvasRatio,
      10
    ).toFixed(1);
    width.value = parseFloat(
      activeObject?.getBoundingRect().width /
        props.zoomRate /
        props.mmPxRatio /
        props.canvasRatio,
      10
    ).toFixed(1);
    height.value = parseFloat(
      activeObject?.getBoundingRect().height /
        props.zoomRate /
        props.mmPxRatio /
        props.canvasRatio,
      10
    ).toFixed(1);
    fabricWidthRatio.value =
      activeObject.width /
      (activeObject.getBoundingRect().width /
        props.zoomRate /
        props.mmPxRatio /
        props.canvasRatio);
    fabricHeightRatio.value =
      activeObject.height /
      (activeObject.getBoundingRect().height /
        props.zoomRate /
        props.mmPxRatio /
        props.canvasRatio);
    fabricLeftRatio.value =
      activeObject.left /
      (activeObject.getBoundingRect().left /
        props.zoomRate /
        props.mmPxRatio /
        props.canvasRatio);

    const isEditable =
      activeObject.type === "textbox" || activeObject.componentType === "date";
    readOnly.value = !isEditable;
    isDate.value = ["barcode"].includes(activeObject.componentType);

    if (isEditable) {
      fontFarimy.value = activeObject.fontFamily;
      fontSizeNum.value = parseInt(Math.round(activeObject.fontSize / 1.764));
      fontSpacingNum.value = activeObject.charSpacing;
      lineHeight.value = activeObject.lineHeight;
    } else if (isDate.value) {
      fontFarimy.value = activeObject.fontFamily;
      fontSizeNum.value = parseInt(Math.round(activeObject.fontSize / 1.764));
    } else {
      fontFarimy.value = "NSimSun";
      fontSizeNum.value = "";
      fontSpacingNum.value = "";
      lineHeight.value = "";
    }
  } else {
    x.value = "";
    y.value = "";
    width.value = "";
    height.value = "";
    fontFarimy.value = "";
    fontSizeNum.value = "";
    fontSpacingNum.value = "";
    lineHeight.value = "";
    readOnly.value = true;
    isDate.value = false;
  }
};

const handleTagSettings = () => {
  let form = Object.assign(
    {
      tagName: "",
      width: "",
      height: "",
      canvasPicUrl: "",
      backgroundImageBase4: props.backgroundImageBase4 || "",
      bgImgFileName: props.bgImgFileName || "",
      bgImgPrint: props.bgImgPrint || "no",
      parentId: props.parentId || 0,
      documentId: props.documentId
    },
    props.tagConfig
  );

  addDialog({
    title: "标签配置",
    props: {
      formInline: form
    },
    width: "30%",
    draggable: true,
    fullscreenIcon: true,
    closeOnClickModal: false,
    contentRenderer: () => tagDetaileForm,
    beforeSure: async (done, { options }) => {
      handleUpdate(options.props.formInline);
      done();
    }
  });
};
const handleSave = () => {
  return new Promise(resolve => {
    let CanvasData = props.tagGraph.save();
    let canvas = props.tagGraph.getCanvas();

    canvas.backgroundColor = "#ffffff";
    let jsondata = {
      width: canvas.width,
      height: canvas.height,
      zoomRate: canvas.zoomRate,
      viewportTransform: canvas.viewportTransform,
      backgroundColor: canvas.backgroundColor,
      backgroundImage: canvas.backgroundImage,
      bgImgFileName: props.bgImgFileName || "",
      backgroundImageBase4: props.backgroundImageBase4 || "",
      bgImgPrint: props.bgImgPrint || "no",
      version: CanvasData.version,
      objects: CanvasData.objects
    };
    let tagConfigData = {
      ...props.tagConfig,
      documentId: props.documentId,
      parentId: props.parentId
    };

    let data = {
      canvasDataUrl: canvas.toDataURL(),
      tagConfig: JSON.stringify(tagConfigData),
      canvasData: JSON.stringify(jsondata),
      tagName: props.tagConfig.tagName
    };

    saveDetail(data).then(res => {
      if (res.success) {
        emit("update:documentId", res.data);
        message("保存成功", { type: "success" });
        resolve();
      } else {
        message("保存失败", { type: "error" });
      }
    });
  });
};
const handleUpdate = async editForm => {
  let CanvasData = props.tagGraph.save();
  let canvas = props.tagGraph.getCanvas();

  canvas.backgroundColor = "#ffffff";
  // 处理背景图片
  let bgImg;
  if (editForm.backgroundImageBase4) {
    bgImg = await props.tagGraph.getImage(editForm.backgroundImageBase4);
    let widthRatio =
      props.tagGraph.canvas.width / bgImg.getBoundingRect().width;
    let heightRatio =
      props.tagGraph.canvas.height / bgImg.getBoundingRect().height;
    // 将背景图片的宽高比例根据目标比例进行更改
    let targetRatio = editForm.width / editForm.height;
    let originRatio = canvas.width / canvas.height;
    widthRatio = widthRatio * (targetRatio / originRatio);

    bgImg.set(
      "scaleX",
      (widthRatio * bgImg.scaleX) / canvas.viewportTransform[0]
    );
    bgImg.set(
      "scaleY",
      (heightRatio * bgImg.scaleY) / canvas.viewportTransform[0]
    );
  } else {
    // bgImg = canvas.backgroundImage;
  }

  let jsondata = {
    width: canvas.width,
    height: canvas.height,
    zoomRate: canvas.zoomRate,
    viewportTransform: canvas.viewportTransform,
    backgroundColor: canvas.backgroundColor,
    backgroundImage: bgImg,
    bgImgFileName: editForm.bgImgFileName,
    backgroundImageBase4: editForm.backgroundImageBase4,
    bgImgPrint: editForm.bgImgPrint,
    version: CanvasData.version,
    objects: CanvasData.objects
  };

  let data = {
    canvasDataUrl: canvas.toDataURL(),
    tagConfig: JSON.stringify(editForm),
    canvasData: JSON.stringify(jsondata),
    tagName: editForm.tagName
  };

  saveDetail(data).then(res => {
    if (res.success) {
      message("保存成功", { type: "success" });
      //调用父组件的queryDetail方法
      emit("saveSetting", res.data);
      emit("update:documentId", res.data);
    } else {
      message("保存失败", { type: "error" });
    }
  });
};
const handlepreview = () => {
  let dataURL = props.tagGraph.preview();

  let form = Object.assign(
    {
      tagName: "",
      width: "",
      height: "",
      canvasPicUrl: "",
      backgroundImageBase4: dataURL,
      bgImgFileName: props.bgImgFileName || "",
      bgImgPrint: props.bgImgPrint || "0",
      parentId: props.parentId || 0,
      documentId: props.documentId
    },
    props.tagConfig
  );
  addDialog({
    props: {
      formInline: form
    },
    hideFooter: true,
    title: "实时预览",
    draggable: true,
    contentRenderer: () => preview
  });
};
const handleFontFamily = val => {
  let item = fontlist.find(item => item.value === val);
  // 判断是否包含去下载

  if (item.isDownload) {
    // fontFarimy.value = props.tagGraph.getActiveObject().fontFamily;
    window.location.href = item.path;
  } else {
    if (props.tagGraph.getActiveObject().componentType === "barcode") {
      const loading = ElLoading.service({
        lock: true,
        text: "生成条码中..."
      });
      loadFont(item.name, item.path).then(() => {
        loading.close();
        eventBus.emit("fontFarimyChange", fontFarimy.value);
        props.tagGraph.setFontFamily(item.value);
      });
    } else {
      eventBus.emit("fontFarimyChange", fontFarimy.value);
      props.tagGraph.setFontFamily(fontFarimy.value);
    }
  }
};
const onFontSizeChange = size => {
  props.tagGraph.setFontSize(size);
  notifyBarcodeModule(size);
};
const notifyBarcodeModule = size => {
  eventBus.emit("fontSizeChange", size * 1.764); // 使用事件总线发送事件
};

//写一个监听路由离开的方法 执行handlesave方法后再允许离开
onBeforeRouteLeave((to, from, next) => {
  handleSave().then(() => {
    next();
  });
});
// 监听页面刷新或关闭
const handleBeforeUnload = event => {
  handleSave();
  event.preventDefault();
  event.returnValue = "确定要离开此页面吗?"; // 兼容某些浏览器
};
</script>
<style lang="scss" scoped>
@import url("../../public/scss/index.scss");
</style>
